//后台管理页面

<template>
  <div>
    <!-- 整个页面容器 -->
    <el-container>
      <!-- 左侧栏 容器-->
      <!-- <el-aside :style="{ width: isCollapse ? 'auto' : '200px' }"> -->
      <el-aside width="collapse">
        <Navbar :menus="menus" :collapse="isCollapse"></Navbar>
      </el-aside>

      <!-- 用一个容器包裹右边内容 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <i
            class="el-collapse el-icon-s-fold"
            @click="handCollapse"
            :class="isCollapse ? 'collapseTransform' : ''"
          >
          </i>
          <!-- 用户信息功能-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="40" @error="errorHandler">
                <img src="../image/宫妹.jpg" />
              </el-avatar>
              {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dialogFormVisible = true"
                >修改信息</el-dropdown-item
              >
              <el-dropdown-item @click.native="loginOut">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <!-- 身体 -->
        <el-main>
          <router-view></router-view>
          <router-view name="dashboard"></router-view>
        </el-main>

        <!-- 底部 -->
        <el-footer> 我是底部 </el-footer>
      </el-container>
    </el-container>

    <!-- 修改用户信息 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import routes from "../router/routes";
import Navbar from "../components/Navbar";
import { getUserById, putUserById } from "../api/users";

export default {
  components: {
    Navbar,
  },
  mounted() {
    let username = localStorage.getItem("username");
    let id = localStorage.getItem("id");
    this.userName = username;
    this.userId = id;
    this.handleUserMod(this.userId);
  },
  data() {
    return {
      isCollapse: false,
      userName: "",
      userId: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      formData: {
        username: "",
        password: "",
        remarks: "",
      },
    };
  },
  methods: {
    handCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 设置嵌套路由的路径，使用递归实现无线层叠
    resolve(routes, parentPath = "") {
      // 参数一:需要遍历的routes 参数二: 传入一个父级路径，给子级路路径使用,形成路径的叠加
      let newArr = [];

      routes.forEach((route) => {
        // parentPath用于过滤是否需要加'/的路径'
        // 1. 判断parentPath(当前父级)路径是否存在
        // 2. 查找parentPath(当前父级)路径的最后一个字符,判断出parentPath(当前父级)路径长度,得到除'/'外的路径长度
        // 3. 并且判断当前parentPath(当前父级)长度-1,与查找到patentPath(当前父级)路径去除'/'后的路径长度是否一致
        // 如果满足上面的条件那么就在父级路径最后添加 '/'
        // 否则该路径为根路径
        parentPath =
          parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;

        // 始终保存上级的路径加上该级的路径
        route.path = parentPath + route.path;

        // 判断父级路径下是否有children对象，有那么在进行循环
        if (route.children && route.children.length > 0) {
          // 处理完数据后重新赋值,从而让路径改变
          route.children = this.resolve(route.children, route.path);
        }
        // 判断如果说需要只有存在一个子菜单那么就把子菜单单独拿出来作为一层菜单,的需求
        // 如果当前路由元信息有hidden信息，那么就将其子节点提升上来
        if (route.meta && route.meta.hidden) {
          if (route.children && route.children.length > 0) {
            route.children.forEach((item) => {
              let tmp = Object.assign({}, item);
              newArr.push(tmp);
            });
          }
        } else {
          newArr.push(route);
        }
      });

      return newArr;
    },
    // 登出按钮
    loginOut() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("id");
          localStorage.removeItem("username");
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消登出!",
          });
        });
    },
    // 获取用户信息
    handleUserMod(id) {
      getUserById(id).then(({ data }) => {
        this.formData.username = data.data.username;
        this.formData.password = data.data.password;
        this.formData.remarks = data.data.remarks;
      });
    },
    // 修改用户信息的确认按钮
    handleConfirm() {
      putUserById(this.userId,this.formData)
        .then(({data})=>{
          this.$message({
             type: 'success',
            message:data.msg
          })
        })
        .catch(err=>{
          this.$message.error(err)
        })

      this.dialogFormVisible = false;
    },
    errorHandler() {
      return true;
    },
  },
  // 注册组件
  computed: {
    menus() {
      let arr = this.resolve(routes);
      return arr;
    },
  },
};
</script>


<style scoped>
.el-aside {
  color: white;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eeee;
}
.el-main {
  min-height: calc(100vh - 120px);
  /* background-color: yellow; */
}
.el-footer {
  background-color: #eeee;
}

.el-collapse {
  font-size: 2rem;
  border-top: none;
  border-bottom: none;
}

.collapseTransform {
  transform: rotate(-90deg);
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>